<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie ie7 lte9 lte8 lte7" lang="ZH"><![endif]-->
<!--[if IE 8]><html class="ie ie8 lte9 lte8" lang="ZH">	<![endif]-->
<!--[if IE 9]><html class="ie ie9 lte9" lang="ZH"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="noIE" lang="ZH">
<!--<![endif]-->

<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="Flatroshop online shopping point" name="description">
<meta content="logoby.us" name="author">
<link href="images/ico.png" rel="shortcut icon">
<title>Flatro - Online Shop Template</title>

<!-- Reset CSS -->
<link href="css/normalize.css" rel="stylesheet" type="text/css">

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Iview Slider CSS -->
<link href="css/iview.css" rel="stylesheet">

<!--	Responsive 3D Menu	-->
<link href="css/menu3d.css" rel="stylesheet">

<!-- Animations -->
<link href="css/animate.css" rel="stylesheet" type="text/css">

<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet" type="text/css" />

<!-- Style Switcher -->
<link href="css/style-switch.css" rel="stylesheet" type="text/css">

<!-- Color -->
<link href="css/skin/color.css" id="colorstyle" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]-->

<!-- Bootstrap core JavaScript -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>

<!-- Custom Scripts -->
<script src="js/scripts.js"></script>

<!-- MegaMenu -->
<script src="js/menu3d.js" type="text/javascript"></script>

<!-- iView Slider -->
<script src="js/raphael-min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/iview.js" type="text/javascript"></script>
<script src="js/retina-1.1.0.min.js" type="text/javascript"></script>

<!--[if IE 8]>
    <script type="text/javascript" src="js/selectivizr.js"></script>
    <![endif]-->

</head>




<body>
<!-- Header -->
<header> 
  <!-- Top Heading Bar -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="topheadrow">
          <ul class="nav nav-pills pull-right">
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#a">ENG <i class="fa fa-angle-down fa-fw"></i> </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#a">ENG</a></li>
                <li><a href="#a">JPN</a></li>
                <li><a href="#a">CHI</a></li>
              </ul>
            </li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#a">USD <i class="fa fa-angle-down fa-fw"></i> </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#a">USD</a></li>
                <li><a href="#a">PKR</a></li>
                <li><a href="#a">JPY</a></li>
              </ul>
            </li>
            <li> <a href="#a"> <i class="fa fa-shopping-cart fa-fw"></i> <span class="hidden-xs">My Cart</span></a> </li>
            <li> <a href="#a"> <i class="fa fa-heart fa-fw"></i> <span class="hidden-xs">Wishlist(0)</span></a> </li>
            <li class="dropdown"> <a class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" href="#a"> <i class="fa fa-user fa-fw"></i> <span class="hidden-xs"> Login</span></a>
              <div class="loginbox dropdown-menu"> <span class="form-header">Login</span>
                <form role="form">
                  <div class="form-group"> <i class="fa fa-user fa-fw"></i>
                    <input class="form-control" id="InputUserName" placeholder="Username" type="text">
                  </div>
                  <div class="form-group"> <i class="fa fa-lock fa-fw"></i>
                    <input class="form-control" id="InputPassword" placeholder="Password" type="password">
                  </div>
                  <button class="btn medium color1 pull-right" type="submit">Login</button>
                </form>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- end: Top Heading Bar -->
  
  <div class="f-space20"></div>
  <!-- Logo and Search -->
  <div class="container">
    <div class="row clearfix">
      <div class="col-lg-3 col-xs-12">
        <div class="logo"> <a href="index.do" title="Flatro Template"><!-- <img alt="Flatro - Responsive Metro Inspired Flat ECommerce theme" src="images/logo2.png"> -->
          <div class="logoimage"><i class="fa fa-shopping-cart fa-fw"></i></div>
          <div class="logotext"><span><strong>FLATRO</strong></span><span>SHOP</span></div>
          <span class="slogan">ONLINE STORE</span></a> </div>
      </div>
      <!-- end: logo -->
      <div class="visible-xs f-space20"></div>
      <!-- search -->
      <div class="col-lg-3 col-md-4 col-sm-5 col-xs-12 pull-right">
        <div class="searchbar">
          <form action="#">
            <ul class="pull-left">
              <li class="input-prepend dropdown" data-select="true"> <a class="add-on dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" href="#a"> <span class="dropdown-display">All
                Categories</span> <i class="fa fa-sort fa-fw"></i> </a> 
                <!-- this hidden field is used to contain the selected option from the dropdown -->
                <input class="dropdown-field" type="hidden" value="All Categories">
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#a" data-value="Men Wear">Men Wear</a></li>
                  <li><a href="#a" data-value="Women Wear">Women Wear</a></li>
                  <li><a href="#a" data-value="Music">Music</a></li>
                  <li><a href="#a" data-value="Mobile Phones">Mobile Phones</a></li>
                  <li><a href="#a" data-value="Computers">Computers</a></li>
                  <li><a href="#a" data-value="Gaming">Gaming</a></li>
                  <li><a href="#a" data-value="Gift Ideas">Gift Ideas</a></li>
                  <li><a href="#a" data-value="All Categories">All Categories</a></li>
                </ul>
              </li>
            </ul>
            <div class="searchbox pull-left">
              <input class="searchinput" id="search" placeholder="Search..." type="search">
              <button class="fa fa-search fa-fw" type="submit"></button>
            </div>
          </form>
        </div>
      </div>
      <!-- end: search --> 
      
    </div>
  </div>
  <!-- end: Logo and Search -->
  <div class="f-space20"></div>
  <!-- Menu -->
  <div class="container">
    <div class="row clearfix">
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 menu-col">
        <div class="menu-heading menuHeadingdropdown"> <span> <i class="fa fa-bars"></i> Categories <i class="fa fa-angle-down"></i></span> </div>
        <!-- Mega Menu -->
        <div class="menu3dmega vertical menuMegasub" id="menuMega">
          <ul>
            <!-- Menu Item Links for Mobiles Only -->
            <li class="visible-xs"> <a href="index.do"> <i class="fa fa-home"></i> <span>Home</span> <i class="fa fa-angle-right"></i> </a>
              <div class="dropdown-menu flyout-menu"> 
                <!-- Sub Menu -->
                <ul>
                  <li><a href="about.do">About us</a></li>
                  <li><a href="blog.do">Blog</a></li>
                  <li> <a href="#a"><span>Account</span> <i class="fa fa-caret-right"></i> </a>
                    <ul class="dropdown-menu sub flyout-menu">
                      <li><a href="#a">Login/Register</a></li>
                      <li><a href="#a">My Orders</a></li>
                      <li><a href="#a">Wish list</a></li>
                      <li><a href="cart.do">Shopping Cart</a></li>
                      <li><a href="checkout.do">Checkout</a></li>
                    </ul>
                  </li>
                  <li> <a href="#a"><span>Product</span> <i class="fa fa-caret-right"></i> </a>
                    <ul class="dropdown-menu sub flyout-menu">
                      <li><a href="category-grid.do">Category Grid</a></li>
                      <li><a href="category-list.do">Category List</a></li>
                      <li><a href="product.do">Product Page</a> </li>
                    </ul>
                  </li>
                  <li><a href="cart.do">Shoping Cart</a></li>
                  <li><a href="checkout.do">Checkout</a></li>
                  <li><a href="blog-single.do">Blog Post</a></li>
                  <li><a href="contact.do">Contact us</a></li>
                </ul>
                <!-- end: Sub Menu --> 
              </div>
            </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item for Tablets and Computers Only-->
            <li class="hidden-xs"> <a href="#a"> <i class="fa fa-files-o"></i> <span>Pages</span> <i class="fa fa-angle-right"></i> </a>
              <div class="dropdown-menu flyout-menu"> 
                <!-- Sub Menu -->
                <ul>
                  <li><a href="index.do">Home</a></li>
                  <li><a href="about.do">About us</a></li>
                  <li><a href="blog.do">Blog</a></li>
                  <li><a href="blog-single.do">Blog Post</a></li>
                  <li> <a href="#a"><span>Product</span> <i class="fa fa-caret-right"></i> </a>
                    <ul class="dropdown-menu sub flyout-menu">
                      <li><a href="category-grid.do">Category Grid</a></li>
                      <li><a href="category-list.do">Category List</a></li>
                      <li><a href="product.do">Product Page</a> </li>
                    </ul>
                  </li>
                  <li><a href="cart.do">Shoping Cart</a></li>
                  <li><a href="checkout.do">Checkout</a></li>
                  <li><a href="contact.do">Contact us</a></li>
                </ul>
                <!-- end: Sub Menu --> 
              </div>
            </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item -->
            <li> <a href="#a"> <i class="fa fa-male"></i> <span>Men Wear</span> <i class="fa fa-angle-right"></i> </a>
              <div class="dropdown-menu"> 
                <!-- Sub Menu -->
                <div class="content">
                  <div class="row">
                    <div class="col-md-4"> <a class="menu-title" href="#a">Fashion</a>
                      <ul>
                        <li><a href="#a">Clothing</a></li>
                        <li><a href="#a">Shoes</a></li>
                        <li><a href="#a">Handbags</a></li>
                        <li><a href="#a">Accessories</a></li>
                        <li><a href="#a">Luggage</a></li>
                        <li><a href="#a">Jewelry</a></li>
                      </ul>
                    </div>
                    <div class="col-md-4"> <a class="menu-title" href="#a">Shirts</a>
                      <ul>
                        <li><a href="#a">Reguler Shirts</a></li>
                        <li><a href="#a">Slim Shirts</a></li>
                        <li><a href="#a">Fashion Shirts</a></li>
                        <li><a href="#a">Black Shirts</a></li>
                        <li><a href="#a">White Shirts</a></li>
                        <li><a href="#a">Gray Shirts</a></li>
                      </ul>
                    </div>
                    <div class="col-md-4"> <a class="menu-title" href="#a">Jeans</a>
                      <ul>
                        <li><a href="#a">Reguler Jeans</a></li>
                        <li><a href="#a">Slim-fit Jeans</a></li>
                        <li><a href="#a">Loose Jeans</a></li>
                        <li><a href="#a">Top Jeans</a></li>
                        <li><a href="#a">New Jeans</a></li>
                        <li><a href="#a">Color Jeans</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <p> <a href="#a"><img alt="" src="images/menu-ad.jpg"></a> </p>
                    </div>
                  </div>
                </div>
                <!-- end: Sub Menu --> 
              </div>
            </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item -->
            <li> <a href="#a"> <i class="fa fa-female"></i> <span>Women Wear</span> <i class="fa fa-angle-right"></i> </a>
              <div class="dropdown-menu"> 
                <!-- Sub Menu -->
                <div class="content">
                  <div class="row">
                    <div class="col-md-5"> <a class="menu-title" href="#a">Fashion</a>
                      <ul>
                        <li><a href="#a">Clothing</a></li>
                        <li><a href="#a">Shoes</a></li>
                        <li><a href="#a">Handbags</a></li>
                        <li><a href="#a">Accessories</a></li>
                        <li><a href="#a">Luggage</a></li>
                        <li><a href="#a">Jewelry</a></li>
                      </ul>
                    </div>
                    <div class="col-md-7">
                      <div class="product-block">
                        <div class="image">
                          <div class="product-label product-sale"><span>SALE</span></div>
                          <a class="img" href="product.do"><img alt="product info" src="images/products/product1.jpg" title="product title"></a> </div>
                        <div class="product-meta">
                          <div class="name"><a href="product.do">Ladies Stylish Handbag</a></div>
                          <div class="big-price"> <span class="price-new"><span class="sym">$</span>96</span> <span class="price-old"><span class="sym">$</span>119.50</span> </div>
                          <div class="big-btns"> <a class="btn btn-default btn-view pull-left" href="">View</a> <a class="btn btn-default btn-addtocart pull-right" href="">Add to
                            Cart</a> </div>
                          <div class="small-price"> <span class="price-new"><span class="sym">$</span>96</span> <span class="price-old"><span class="sym">$</span>119.50</span> </div>
                          <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i> </div>
                          <div class="small-btns">
                            <button class="btn btn-default btn-compare pull-left" data-toggle="tooltip" title="Add to Compare"> <i class="fa fa-retweet fa-fw"></i> </button>
                            <button class="btn btn-default btn-wishlist pull-left" data-toggle="tooltip" title="Add to Wishlist"> <i class="fa fa-heart fa-fw"></i> </button>
                            <button class="btn btn-default btn-addtocart pull-left" data-toggle="tooltip" title="Add to Cart"> <i class="fa fa-shopping-cart fa-fw"></i> </button>
                          </div>
                        </div>
                        <div class="meta-back"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end: Sub Menu --> 
              </div>
            </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item -->
            <li> <a href="#a"> <i class="fa fa-video-camera"></i> <span>Digital Camera</span></a> </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item -->
            <li> <a href="#a"> <i class="fa fa-mobile"></i> <span>Mobile Phones</span></a> </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item -->
            <li> <a href="#a"> <i class="fa fa-laptop"></i> <span>Computers</span></a> </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item -->
            <li> <a href="#a"> <i class="fa fa-gamepad"></i> <span>Gaming</span></a> </li>
            <!-- end: Menu Item --> 
            <!-- Menu Item -->
            <li> <a href="#a"> <i class="fa fa-gift"></i> <span>Gift Ideas</span></a> </li>
            <!-- end: Menu Item -->
          </ul>
        </div>
        <!-- end: Mega Menu --> 
      </div>
      <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 menu-col-2"> 
        <!-- Navigation Buttons/Quick Cart for Tablets and Desktop Only -->
        <div class="menu-links hidden-xs">
          <ul class="nav nav-pills nav-justified">
            <li> <a href="index.do"> <i class="fa fa-home fa-fw"></i> <span class="hidden-sm">Home</span></a> </li>
            <li> <a href="about.do"> <i class="fa fa-info-circle fa-fw"></i> <span class="hidden-sm">About</span></a> </li>
            <li> <a href="blog.do"> <i class="fa fa-bullhorn fa-fw"></i> <span class="hidden-sm">Blog</span></a> </li>
            <li> <a href="contact.do"> <i class="fa fa-pencil-square-o fa-fw"></i> <span class="hidden-sm ">Contact</span></a> </li>
            <li class="dropdown"> <a href="cart.do"> <i class="fa fa-shopping-cart fa-fw"></i> <span class="hidden-sm"> 5 items | $4530.00</span></a> 
              <!-- Quick Cart -->
              <div class="dropdown-menu quick-cart">
                <div class="qc-row qc-row-heading"> <span class="qc-col-qty">QTY.</span> <span class="qc-col-name">5 items in bag</span> <span class="qc-col-price">$4530.00</span> </div>
                <div class="qc-row qc-row-item"> <span class="qc-col-qty">2</span> <span class="qc-col-name"><a href="#a">Women Fashion hot Wear item</a></span> <span class="qc-col-price">$500</span> <span class="qc-col-remove"> <i class="fa fa-times fa-fw"></i> </span> </div>
                <div class="qc-row qc-row-item"> <span class="qc-col-qty">1</span> <span class="qc-col-name"><a href="#a">Women Fashion hot Wear item</a></span> <span class="qc-col-price">$800</span> <span class="qc-col-remove"> <i class="fa fa-times fa-fw"></i> </span> </div>
                <div class="qc-row qc-row-item"> <span class="qc-col-qty">3</span> <span class="qc-col-name"><a href="#a">Women Fashion hot Wear item</a></span> <span class="qc-col-price">$252.25</span> <span class="qc-col-remove"> <i class="fa fa-times fa-fw"></i> </span> </div>
                <div class="qc-row-bottom"><a class="btn qc-btn-viewcart" href="#a">view
                  cart</a><a class="btn qc-btn-checkout" href="#a">check
                  out</a></div>
              </div>
              <!-- end: Quick Cart --> 
            </li>
          </ul>
        </div>
        <!-- end: Navigation Buttons/Quick Cart Tablets and large screens Only --> 
        
      </div>
    </div>
  </div>
</header>
<!-- end: Header -->

<div class="row clearfix"></div>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="breadcrumb"> <a href="index.do"> <i class="fa fa-home fa-fw"></i> Home </a> <i class="fa fa-angle-right fa-fw"></i> <a href="category-list.do"> Category List </a> </div>
      
      <!-- Quick Help for tablets and large screens -->
      <div class="quick-message hidden-xs">
        <div class="quick-box">
          <div class="quick-slide"> <span class="title">Help</span>
            <div class="quickbox slide" id="quickbox">
              <div class="carousel-inner">
                <div class="item active"> <a href="#"> <i class="fa fa-envelope fa-fw"></i> Quick Message</a> </div>
                <div class="item"> <a href="#"> <i class="fa fa-question-circle fa-fw"></i> FAQ</a> </div>
                <div class="item"> <a href="#"> <i class="fa fa-phone fa-fw"></i> (92)3009712255</a> </div>
              </div>
            </div>
            <a class="left carousel-control" data-slide="prev" href="#quickbox"> <i class="fa fa-angle-left fa-fw"></i> </a> <a class="right carousel-control" data-slide="next" href="#quickbox"> <i class="fa fa-angle-right fa-fw"></i> </a> </div>
        </div>
      </div>
      <!-- end: Quick Help --> 
      
    </div>
  </div>
</div>
<div class="row clearfix f-space10"></div>
<!-- Shop Page title -->
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="shop-page-title dark">
        <h2>Men Wear</h2>
        <ul class="pull-left">
          <li><a href="#a">T-Shirts(759)</a></li>
          <li><a href="#a">Casual Shirts(622)</a></li>
          <li><a href="#a">Polo T-Shirts(326)</a></li>
          <li><a href="#a">Combos(282)</a></li>
        </ul>
        <ul class="pull-left">
          <li><a href="#a">Casual Trousers(56)</a></li>
          <li><a href="#a">Shorts(55)</a></li>
          <li><a href="#a">Track Pants & Suits(46)</a></li>
          <li><a href="#a">Kurtas & Pyjamas(40)</a></li>
        </ul>
        <ul class="pull-left">
          <li><a href="#a">Jeans(222)</a></li>
          <li><a href="#a">Formal Shirts(215)</a></li>
          <li><a href="#a">Inner Wear(106)</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- end: Shop Page title -->
<div class="row clearfix f-space10"></div>
<div class="container"> 
  <!-- row -->
  <div class="row">
    <div class="col-md-9 col-sm-12 col-xs-12 box-block">
      <div class="box-heading category-heading"><span>Showing 1-9 of 240 products</span>
        <ul class="nav nav-pills pull-right">
          <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#a"> 9 per page <i class="fa fa-sort fa-fw"></i> </a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#a">12 per page</a></li>
              <li><a href="#a">15 per page</a></li>
              <li><a href="#a">18 per page</a></li>
              <li><a href="#a">21 per page</a></li>
              <li><a href="#a">100 per page</a></li>
              <li><a href="#a">Show all</a></li>
            </ul>
          </li>
          <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#a"> Sort by <i class="fa fa-sort fa-fw"></i> </a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#a">Name (A-Z)</a></li>
              <li><a href="#a">Name (Z-A)</a></li>
              <li><a href="#a">Price (Low-High)</a></li>
              <li><a href="#a">Price (High-Low)</a></li>
              <li><a href="#a">Rating Highest</a></li>
              <li><a href="#a">Rating Lowest</a></li>
              <li><a href="#a">Recent</a></li>
            </ul>
          </li>
          <li class="view-list active"> <a href="category-list.do"> <i class="fa fa-list-ul fa-fw"></i></a> </li>
          <li class="view-grid"> <a href="category-grid.do"> <i class="fa fa-th-large fa-fw"></i></a> </li>
        </ul>
      </div>
      <div class="row clearfix f-space20"></div>
      <div class="box-content">
        <div class="box-products"> 
          
          <!-- Product Row -->
          <div class="row list-product"> 
            <!-- Product --> 
            <!-- Image -->
            <div class="col-md-4 col-sm-12 col-xs-12 product-image">
              <div class="image">
                <div class="product-label product-sale"><span>SALE</span></div>
                <a class="img" href="product.do"><img alt="product info" src="images/products/product1.jpg" title="product title" class="ani-image"></a> </div>
            </div>
            <!-- end: Image -->
            
            <div class="col-md-8 col-sm-12 col-xs-12 product-title">
              <div class="producttitle">
                <h1><a href="#">Classic Fashion Dress</a></h1>
                <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                <span class="reviews-info">This product has 30 review(s)</span> </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12 product-price">
              <div class="big-price"> <span class="price-old"><span class="sym">$</span>560.50</span> <span class="price-new"><span class="sym">$</span>520.99</span> </div>
            </div>
            <div class="col-md-5 col-sm-8 col-xs-12 product-meta">
              <div class="productmeta">
                <p>Dramatically innovate granular niches rather than interactive materials. Build ethical leadership skills via alternative manufactured e-enable... <a href="#a">read more</a></p>
                <div class="category-list-btns">
                  <button class="btn normal btn-compare pull-left" data-toggle="tooltip" title="Add to Compare"> <i class="fa normal fa-retweet fa-fw"></i> </button>
                  <button class="btn normal btn-wishlist pull-left" data-toggle="tooltip" title="Add to Wishlist"> <i class="fa normal fa-heart fa-fw"></i> </button>
                  <button class="btn normal btn-addtocart pull-left"> <i class="fa fa-shopping-cart fa-fw"></i> Add to Cart </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- end: Product Row -->
          
          <div class="row clearfix f-space20"></div>
          
          <!-- Product Row -->
          <div class="row list-product"> 
            <!-- Product --> 
            <!-- Image -->
            <div class="col-md-4 col-sm-12 col-xs-12 product-image">
              <div class="image">
                <div class="product-label product-new"><span>NEW</span></div>
                <a class="img" href="product.do"><img alt="product info" src="images/products/product2-2.jpg" title="product title" class="ani-image"></a> </div>
            </div>
            <!-- end: Image -->
            
            <div class="col-md-8 col-sm-12 col-xs-12 product-title">
              <div class="producttitle">
                <h1><a href="#">Watch for men</a></h1>
                <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                <span class="reviews-info">This product has 30 review(s)</span> </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12 product-price">
              <div class="big-price"> <span class="price-new"><span class="sym">$</span>340</span> </div>
            </div>
            <div class="col-md-5 col-sm-8 col-xs-12 product-meta">
              <div class="productmeta">
                <p>Dramatically innovate granular niches rather than interactive materials. Build ethical leadership skills via alternative manufactured e-enable... <a href="#a">read more</a></p>
                <div class="category-list-btns">
                  <button class="btn normal btn-compare pull-left" data-toggle="tooltip" title="Add to Compare"> <i class="fa normal fa-retweet fa-fw"></i> </button>
                  <button class="btn normal btn-wishlist pull-left" data-toggle="tooltip" title="Add to Wishlist"> <i class="fa normal fa-heart fa-fw"></i> </button>
                  <button class="btn normal btn-addtocart pull-left"> <i class="fa fa-shopping-cart fa-fw"></i> Add to Cart </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- end: Product Row -->
          
          <div class="row clearfix f-space20"></div>
          
          <!-- Product Row -->
          <div class="row list-product"> 
            <!-- Product --> 
            <!-- Image -->
            <div class="col-md-4 col-sm-12 col-xs-12 product-image">
              <div class="image"> <a class="img" href="product.do"><img alt="product info" src="images/products/product3.jpg" title="product title" class="ani-image"></a> </div>
            </div>
            <!-- end: Image -->
            
            <div class="col-md-8 col-sm-12 col-xs-12 product-title">
              <div class="producttitle">
                <h1><a href="#">Women Fashion Dress</a></h1>
                <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                <span class="reviews-info">This product has 20 review(s)</span> </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12 product-price">
              <div class="big-price"> <span class="price-new"><span class="sym">$</span>567.60</span> </div>
            </div>
            <div class="col-md-5 col-sm-8 col-xs-12 product-meta">
              <div class="productmeta">
                <p>Dramatically innovate granular niches rather than interactive materials. Build ethical leadership skills via alternative manufactured e-enable... <a href="#a">read more</a></p>
                <div class="category-list-btns">
                  <button class="btn normal btn-compare pull-left" data-toggle="tooltip" title="Add to Compare"> <i class="fa normal fa-retweet fa-fw"></i> </button>
                  <button class="btn normal btn-wishlist pull-left" data-toggle="tooltip" title="Add to Wishlist"> <i class="fa normal fa-heart fa-fw"></i> </button>
                  <button class="btn normal btn-addtocart pull-left"> <i class="fa fa-shopping-cart fa-fw"></i> Add to Cart </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- end: Product Row -->
          
          <div class="row clearfix f-space20"></div>
          
          <!-- Product Row -->
          <div class="row list-product"> 
            <!-- Product --> 
            <!-- Image -->
            <div class="col-md-4 col-sm-12 col-xs-12 product-image">
              <div class="image">
                <div class="product-label product-new"><span>NEW</span></div>
                <a class="img" href="product.do"><img alt="product info" src="images/products/product2.jpg" title="product title" class="ani-image"></a> </div>
            </div>
            <!-- end: Image -->
            
            <div class="col-md-8 col-sm-12 col-xs-12 product-title">
              <div class="producttitle">
                <h1><a href="#">Fashion Shoes</a></h1>
                <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                <span class="reviews-info">This product has 10 review(s)</span> </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12 product-price">
              <div class="big-price"> <span class="price-new"><span class="sym">$</span>789</span> </div>
            </div>
            <div class="col-md-5 col-sm-8 col-xs-12 product-meta">
              <div class="productmeta">
                <p>Dramatically innovate granular niches rather than interactive materials. Build ethical leadership skills via alternative manufactured e-enable... <a href="#a">read more</a></p>
                <div class="category-list-btns">
                  <button class="btn normal btn-compare pull-left" data-toggle="tooltip" title="Add to Compare"> <i class="fa normal fa-retweet fa-fw"></i> </button>
                  <button class="btn normal btn-wishlist pull-left" data-toggle="tooltip" title="Add to Wishlist"> <i class="fa normal fa-heart fa-fw"></i> </button>
                  <button class="btn normal btn-addtocart pull-left"> <i class="fa fa-shopping-cart fa-fw"></i> Add to Cart </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- end: Product Row --> 
          
        </div>
      </div>
      <div class="clearfix f-space30"></div>
      <span class="pull-left">Showing 1-9 of 240 products</span>
      <div class="pull-right">
        <ul class="pagination pagination-lg">
          <li class="disabled"><a href="#"><i class="fa fa-angle-left"></i></a></li>
          <li  class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
        </ul>
      </div>
    </div>
    
    <!-- side bar -->
    <div class="col-md-3 col-sm-12 col-xs-12 box-block page-sidebar">
      <div class="box-heading"><span>Shop by</span></div>
      <!-- Filter by -->
      <div class="box-content">
        <div class="shopby"> <span>Color</span>
          <div class="colors"> <a href="#a" data-toggle="tooltip" title="Orange (20)" class="color bg-orange"></a> <a href="#a" data-toggle="tooltip" title="Fuchsia (03)" class="color bg-fuchsia"></a> <a href="#a" data-toggle="tooltip" title="Blue (12)" class="color bg-blue"></a> <a href="#a" data-toggle="tooltip" title="Gray (20)" class="color bg-gray"></a> <a href="#a" data-toggle="tooltip" title="Coral (10)" class="color bg-coral"></a> <a href="#a" data-toggle="tooltip" title="Khaki (33)" class="color bg-khaki"></a> <a href="#a" data-toggle="tooltip" title="Green (20)" class="color bg-green"></a> <a href="#a" data-toggle="tooltip" title="Purple (20)" class="color bg-purple"></a> <a href="#a" data-toggle="tooltip" title="Salmon (44)" class="color bg-salmon"></a> <a href="#a" data-toggle="tooltip" title="Cyan (21)" class="color bg-cyan"></a> <a href="#a" data-toggle="tooltip" title="Gold (11)" class="color bg-gold"></a> <a href="#a" data-toggle="tooltip" title="Teal (30)" class="color bg-teal"></a> <a href="#a" data-toggle="tooltip" title="White (33)" class="color bg-white"></a> <a href="#a" data-toggle="tooltip" title="Black (18)" class="color bg-black"></a> </div>
          <hr>
          
          <!-- Price Range --> 
          <span>Price range</span>
          <div class="pricerange">
            <input type="text" id="price-range" name="price-range">
            <!-- 	data-from="30"                      // overwrite default FROM setting
data-to="70"                        // overwrite default TO setting
data-type="double"                  // slider type
data-step="10"                      // slider step
data-postfix=" pounds"              // postfix text
data-hasgrid="true"                 // enable grid
data-hideminmax="true"              // hide Min and Max fields
data-hidefromto="true"              // hide From and To fields
data-prettify="false"               // don't use spaces in large numbers, eg. 10000 than 10 000
 -->
            
            <button class="btn color1 normal pull-right" type="submit">Clear</button>
          </div>
          <!--end: Price Range --> 
        </div>
      </div>
      <!-- end: Filter by -->
      
      <div class="clearfix f-space30"></div>
      <div class="box-heading"><span>Categories</span></div>
      <!-- Categories -->
      <div class="box-content">
        <div class="panel-group" id="blogcategories">
          <div class="panel panel-default">
            <div class="panel-heading closed" data-parent="#blogcategories" data-target="#collapseOne" data-toggle="collapse">
              <h4 class="panel-title"> <a href="#a"> <span class="fa fa-plus"></span> Men Wear </a><span class="categorycount">14</span> </h4>
            </div>
            <div class="panel-collapse collapse" id="collapseOne">
              <div class="panel-body">
                <ul>
                  <li class="item"> <a href="#a">Jeans</a></li>
                  <li class="item"> <a href="#a">Shirts</a></li>
                  <li class="item"> <a href="#a">Shoes</a></li>
                  <li class="item"> <a href="#a">Sports Wear</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading opened" data-parent="#blogcategories" data-target="#collapseTwo" data-toggle="collapse">
              <h4 class="panel-title"> <a href="#a"> <span class="fa fa-minus"></span> Women Wear </a> <span class="categorycount">10</span></h4>
            </div>
            <div class="panel-collapse collapse in" id="collapseTwo">
              <div class="panel-body">
                <ul>
                  <li class="item"> <a href="#a">Jeans</a></li>
                  <li class="item"> <a href="#a">Shirts</a></li>
                  <li class="item"> <a href="#a">Shoes</a></li>
                  <li class="item"> <a href="#a">Sports Wear</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading closed" data-parent="#blogcategories" data-target="#collapseThree" data-toggle="collapse">
              <h4 class="panel-title"> <a href="#a"> <span class="fa fa-plus"></span> Fragrance </a> <span class="categorycount">23</span></h4>
            </div>
            <div class="panel-collapse collapse" id="collapseThree">
              <div class="panel-body">
                <ul>
                  <li class="item"> <a href="#a">Jeans</a></li>
                  <li class="item"> <a href="#a">Shirts</a></li>
                  <li class="item"> <a href="#a">Shoes</a></li>
                  <li class="item"> <a href="#a">Sports Wear</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading closed" data-parent="#blogcategories" data-target="#collapseFour" data-toggle="collapse">
              <h4 class="panel-title"> <a href="#a"> <span class="fa fa-plus"></span> Music </a><span class="categorycount">06</span> </h4>
            </div>
            <div class="panel-collapse collapse" id="collapseFour">
              <div class="panel-body">
                <ul>
                  <li class="item"> <a href="#a">Jeans</a></li>
                  <li class="item"> <a href="#a">Shirts</a></li>
                  <li class="item"> <a href="#a">Shoes</a></li>
                  <li class="item"> <a href="#a">Sports Wear</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading closed" data-parent="#blogcategories" data-target="#collapseFive" data-toggle="collapse">
              <h4 class="panel-title"> <a href="#a"> <span class="fa fa-plus"></span> Games </a><span class="categorycount">80</span> </h4>
            </div>
            <div class="panel-collapse collapse" id="collapseFive">
              <div class="panel-body">
                <ul>
                  <li class="item"> <a href="#a">Jeans</a></li>
                  <li class="item"> <a href="#a">Shirts</a></li>
                  <li class="item"> <a href="#a">Shoes</a></li>
                  <li class="item"> <a href="#a">Sports Wear</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end: Blog Categories -->
      
      <div class="clearfix f-space30"></div>
      <div class="box-heading"><span>Compare</span></div>
      <!-- Compare -->
      <div class="box-content">
        <div class="compare"> <span><a href="product.do">Ladies Stylish Handbag</a> <a href="#" class="pull-right"><i class="fa fa-times fa-fw"></i></a> </span> <span><a href="product.do">Female Strips Handbag</a> <a href="#" class="pull-right"><i class="fa fa-times fa-fw"></i></a> </span> <span><a href="product.do">Blue Fashion Bag</a> <a href="#" class="pull-right"><i class="fa fa-times fa-fw"></i></a> </span>
          <button class="btn color1 normal pull-right" type="submit">Compare</button>
        </div>
        
        <!-- Compare --> 
      </div>
      <div class="clearfix f-space30"></div>
      <!-- Get Updates Box -->
      <div class="box-content">
        <div class="subscribe">
          <div class="heading">
            <h3>Get updates</h3>
          </div>
          <div class="formbox">
            <form>
              <i class="fa fa-envelope fa-fw"></i>
              <input class="form-control" id="InputUserEmail" placeholder="Your e-mail..." type="text">
              <button class="btn color1 normal pull-right" type="submit">Sign
              up</button>
            </form>
          </div>
        </div>
      </div>
      <!-- end: Get Updates Box --> 
      
    </div>
    <!-- end:sidebar --> 
  </div>
  <!-- end:row --> 
</div>
<!-- end: container-->

<div class="row clearfix f-space30"></div>
<!-- footer -->
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-3 col-xs-12 shopinfo">
        <h4 class="title">FLATSHOP</h4>
        <p> This Efficiently negotiate robust communities with extensible systems.
          Appropriately productize top-line leadership skills rather than team
          building applications.</p>
        <p> Phosfluorescently extend highly efficient schemas with intermandated. </p>
      </div>
      <div class="col-sm-3 col-xs-12 footermenu">
        <h4 class="title">Information</h4>
        <ul>
          <li class="item"> <a href="#a">Delivery Info</a></li>
          <li class="item"> <a href="#a">FAQs</a></li>
          <li class="item"> <a href="#a">Payment Instructions</a></li>
          <li class="item"> <a href="#a">Request Product</a></li>
          <li class="item"> <a href="#a">Vendor Registration</a></li>
          <li class="item"> <a href="#a">Affiliates</a></li>
          <li class="item"> <a href="#a">Gift Vouchers</a></li>
        </ul>
      </div>
      <div class="col-sm-3 col-xs-12 footermenu">
        <h4 class="title">My
          account</h4>
        <ul>
          <li class="item"> <a href="#a">My Account</a></li>
          <li class="item"> <a href="#a">Order History</a></li>
          <li class="item"> <a href="#a">Wish List</a></li>
          <li class="item"> <a href="#a">Newsletter</a></li>
        </ul>
      </div>
      <div class="col-sm-3 col-xs-12 getintouch">
        <h4 class="title">get in
          touch</h4>
        <ul>
          <li>
            <div class="icon"> <i class="fa fa-map-marker fa-fw"></i> </div>
            <div class="c-info"> <span>3rd Avenue, NY, US<br>
              <a href="#a">Find us on map</a></span> </div>
          </li>
          <li>
            <div class="icon"> <i class="fa fa-envelope-o fa-fw"></i> </div>
            <div class="c-info"> <span>Email Us At:<br>
              <a href="#a">support@domain.com</a></span> </div>
          </li>
          <li>
            <div class="icon"> <i class="fa fa-phone fa-fw"></i> </div>
            <div class="c-info"> <span>24/7 Phone Support:<br>
              <a href="#a">+1 (888) 888 8888</a></span> </div>
          </li>
          <li>
            <div class="icon"> <i class="fa fa-skype fa-fw"></i> </div>
            <div class="c-info"> <span>Talk to Us:<br>
              <a href="#a">skypeid</a></span> </div>
          </li>
        </ul>
        <div class="social-icons">
          <ul>
            <li class="icon google-plus"> <a href="#a"> <i class="fa fa-google-plus fa-fw"></i> </a> </li>
            <li class="icon linkedin"> <a href="#a"> <i class="fa fa-linkedin fa-fw"></i> </a> </li>
            <li class="icon twitter"> <a href="#a"> <i class="fa fa-twitter fa-fw"></i> </a> </li>
            <li class="icon facebook"> <a href="#a"> <i class="fa fa-facebook fa-fw"></i> </a> </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="copyrights">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-sm-8 col-xs-12"> <span class="copytxt">&copy; Copyright 2013 by <a href="#a">Flatro</a> - All rights reserved</span> <span class="btmlinks"><a href="#a">Return Policy</a> | <a href="#a">Privacy Policy</a> | <a href="#a">Terms of Use</a></span> </div>
        <div class="col-lg-4 col-sm-4 col-xs-12 payment-icons"> <a href="#a"> <img alt="discover" src="images/icons/discover.png"> </a> <a href="#a"> <img alt="2co" src="images/icons/2co.png"> </a> <a href="#a"> <img alt="paypal" src="images/icons/paypal.png"> </a> <a href="#a"> <img alt="master card" src="images/icons/mastercard.png"> </a> <a href="#a"> <img alt="visa card" src="images/icons/visa.png"> </a> <a href="#a"> <img alt="moneybookers" src="images/icons/moneybookers.png"> </a> </div>
      </div>
    </div>
  </div>
</footer>
<!-- end: footer --> 
<!-- Style Switcher JS --> 
<script src="js/style-switch.js" type="text/javascript"></script>
<section id="style-switch" class="bgcolor3">
  <h2>Style Switch <a href="#" class="btn color2"><i class="fa fa-cog "></i></a></h2>
  <div class="inner">
    <h3>Predefined Styles</h3>
    <ul class="colors list-unstyled" id="color1">
      <li><a href="#" class="blue-red" data-toggle="tooltip" title="Blue Red" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="midnight-blue" data-toggle="tooltip" title="Midnight Blue" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="mono-red" data-toggle="tooltip" title="Mono Red" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="pinegreen-purple" data-toggle="tooltip" title="PineGreen Purple" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="darkmagenta-rosybrown" data-toggle="tooltip" title="DarkMagenta RosyBrown" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="darkorchid-seagreen" data-toggle="tooltip" title="DarkOrchid SeaGreen" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="steel-blue" data-toggle="tooltip" title="Steel Blue" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="cadetblue-violetred" data-toggle="tooltip" title="CadetBlue VioletRed" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="mediumpurple-seagreen" data-toggle="tooltip" title="MediumPurple SeaGreen" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="steelblue-leafgreen" data-toggle="tooltip" title="SteelBlue LeafGreen" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="orange-steelblue" data-toggle="tooltip" title="Orange SteelBlue" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
      <li><a href="#" class="gray" data-toggle="tooltip" title="Gray" > <i class="fa fa-cog fa-stop one"></i><i class="fa fa-cog fa-stop two"></i></a></li>
    </ul>
  </div>
  <div id="reset" class="inner"><a href="#" class="btn normal color2 ">Reset</a></div>
</section>

<script>

(function($) {
  "use strict";
  //Mega Menu
 $('#menuMega').menu3d();
             
              //Help/Contact Number/Quick Message
			$('.quickbox').carousel({
				interval: 10000
			});
			
				
			//Filter by Price Slider
$("#price-range").ionRangeSlider({
    min: 100,                        // min value
    max: 1000,                       // max value
    from: 200,                       // overwrite default FROM setting
    to: 600,                         // overwrite default TO setting
    type: "double",                 // slider type
    step: 50,                       // slider step
    postfix: "",             		// postfix text
    hasGrid: false,                  // enable grid
    hideMinMax: false,               // hide Min and Max fields
    hideFromTo: false,               // hide From and To fields
    prettify: false,                 // separate large numbers with space, eg. 10 000
    onChange: function(obj){        // function-callback, is called on every change
        console.log(obj);
    },
    onFinish: function(obj){        // function-callback, is called once, after slider finished it's work
        console.log(obj);
    }
});			
				
				
				
})(jQuery);

 </script>

</body>
</html>
